<template>
  <div class="alloc-station">
    <i-dialog
      title="发卡详情"
      width="1174px"
      height="448px"
      :visible="visible"
      :close-on-click-modal="false"
      @close="outerClose"
    >
      <TableSearch
        ref="tableSearch"
        :columns="columns"
        :tableData="tableData"
        :page-name-display="false"
        @handleTableData="handleTableData"
      >
        <template slot="tableSearchHeader">
          <div class="table-outside-header">
            <div class="search-result-count">
              当前搜索结果<strong>{{ tableData.totalCount || 0 }}</strong
              >条
            </div>
            <ExportButton
              class="table-outside-btn"
              :start-download="startDownload"
              >导出</ExportButton
            >
          </div>
        </template>
      </TableSearch>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerClose">关闭</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import ExportButton from '@/components/ExportButton'
import { sendCardList, exportSendTimeCard } from '@/api/activity'
import formatter from '@/utils/format'
export default {
  name: 'AllocStation',
  components: { TableSearch, ExportButton },
  data() {
    return {
      columns: [
        {
          label: '券码',
          prop: 'integralId',
        },
        {
          label: '用户手机',
          prop: 'userMobile',
        },
        {
          label: '领取电站',
          prop: 'receiveStationName',
        },
        {
          label: '总时长（h）',
          prop: 'initialTime',
        },
        {
          label: '剩余时长（min）',
          prop: 'restTime',
        },
        {
          label: '到期时间',
          prop: 'expireTime',
          formatter,
        },
      ],
      tableData: {},
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    exportBtn() {
      return this.resourceSet.includes(
        '/web/activity-management/externalActivity-management/detail/导出'
      )
    },
  },
  methods: {
    startDownload(callback) {
      exportSendTimeCard({
        exActId: parseInt(this.$route.params.exActId),
        pageSize: 10,
        currentPage: 1,
      })
        .then((res) => {
          callback(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    outerClose() {
      this.$emit('update:visible', false)
    },
    handleTableData(params) {
      params.exActId = parseInt(this.$route.params.exActId)
      sendCardList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.alloc-station {
  &::v-deep .table-dash {
    padding-top: 0;
  }
}
</style>
